<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            /* CSS可以直接使用颜色值设置颜色 */
            background-color: red;
            /* 
               RGB
                  （red,green,blue)范围0-255（0-100%）之间
               RGBA
                  （可以包括透明度 .5=50%）
               16进制RGB值
                   语法：#RGB红色绿色蓝色
                   范围：00-ff
               HSL值/HSLA值
                   H 色相 0-360
                   S 饱和度 0-100
                   L 亮度 0-100
             */
             background-color: rgba(100, 100,100,.5);
             background-color: hsl(30,100,50);
             /* 
             文档流(normal flow)
             网页是一个多层的结构，一层加一层，可以为每一层设置样式
             用户只能看到最顶上的一层
             最底下的一层称为文档流，我们所创建的元素默认在文档流之中进行排列
             文件：在文档流
                   不在文档流
                   块元素
                   行内元素
                   行内元素
             */
        }
        .box2{
            background-color: red;
            /* 特点:
                   块元素
                      在页面中夫占一行
                      默认宽度是父元素的全部
                      默认高度是字体的高度
             */
        }
        span{
            background-color: aquamarine;
            /* 特点：
                    只占有自身大小，自左向右排列
                    自左向右（与书写习惯一致）
            */
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <span class="span1">span1</span>
    <span class="span2">span2</span>
    <span class="span3">span3</span>
</body>
</html>